<template>
  <el-card shadow="hover" style="max-height: 43.2vh">
    <div slot="header" class="clearfix">
      <span style="font-size: 16px; color: #1890ff; font-weight: 550">审核待办</span>
    </div>
    <div class="sim">
      <div style="font-size: 14px;line-height: 2;">

        <div style="display: flex; align-items: center;">
          <span class="ball color1" />
          <div class="ball-label">项目立项审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color2" />
          <div class="ball-label">科研合同审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color3" />
          <div class="ball-label">合同变更审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color4" />
          <div class="ball-label">执行情况审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color5" />
          <div class="ball-label">成果鉴定审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color6" />
          <div class="ball-label">成果转化审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color7" />
          <div class="ball-label">奖项申报审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color8" />
          <div class="ball-label">科技预算审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color9" />
          <div class="ball-label">中间检查审批待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color10" />
          <div class="ball-label">省部项目评价审核：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color11" />
          <div class="ball-label">省部报奖审核待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
        <div style="display: flex; align-items: center;">
          <span class="ball color12" />
          <div class="ball-label">项目开票审核待办：<span style="color: #1890ff">{{ 22 }}</span>项</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "ShDb"
}
</script>

<style scoped>
/* 审核待办中的颜色小圆球 */
.ball {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.color1 {
  background-color: #5181FF;
}
.color2 {
  background-color: #958BFF;
}
.color3 {
  background-color: #faad14;
}
.color4 {
  background-color: #FF688D;
}
.color5 {
  background-color: #00DACE;
}
.color6 {
  background-color: #1F46AE;
}
.color7 {
  background-color: #32DF24;
}
.color8 {
  background-color: #EC4F56;
}
.color9 {
  background-color: #E39C2D;
}
.color10 {
  background-color: #A5CE15;
}
.color11 {
  background-color: #943DDD;
}
.color12 {
  background-color: #D11ED6;
}
.sim {
  overflow-y: auto !important;
  height: 100%;
}
</style>
